<template>
  <div :style="{
    overflow: isHiddenmod? 'hidden':'auto',
    height: isHiddenmod ? '0': 'auto'
  }">
    <!--客户信息-->
    <BaseInformation
      :customer="customer"
      :currentBusinessObj="currentBusinessObj"
      :webchatData="webchatData"
      @subPanelOpen="isHiddenmod = true"
      @subPanelClose="isHiddenmod = false"
    />
    <!--备注-->
    <div class="chat_info_remark chat_info_li">
      <div class="container_finish" v-if="tabType === 'webchat_todo' || isCanShowFinishType">
        <p v-if="tabType !== 'webchat_all'" class="chat_info_li_title font14">{{$t('webchat.addSessionType')}}</p>
        <p v-if="tabType === 'webchat_all'" class="chat_info_li_title font14">{{$t('webchat.updateSessionType')}}</p>
        <el-cascader
          ref="webchatCascader"
          popper-class="webchat-finish"
          :placeholder="$t('webchat.chooseEndSessionType')"
          :options="cardInfo.endOptionsUl"
          filterable
          @change="changeFinishFun"
          v-model="activeOptions">
        </el-cascader>
      </div>
      <div class="container_remark">
        <p class="chat_info_li_title font14">{{$t('public.addRemarks')}}</p>
        <textarea class="chat_info_li_remarks" rows="3" :placeholder="$t('public.pleaseRemark')" v-on:blur="editRemark()" v-model="remark"></textarea>
      </div>
      <!--会话线索-->
      <div class="container">
        <p class="chat_info_li_title font14">线索</p>
        <textarea class="chat_info_li_cue" rows="3" v-on:blur="editChatCue($event)" v-model="chaCue" :disabled="tabType !== 'webchat_todo'"></textarea>
      </div>
    </div>
    <!--访问信息-->
    <AccessInformation
      :webchatData="webchatData"
      :chatInfo="chatInfo"
    ></AccessInformation>
    <!--对话信息-->
    <ConversationInfo
      :chatInformationId="webchatData._id"
      :webchatData="webchatData"
      :chatInfo="chatInfo"
    ></ConversationInfo>
    <!--扩展信息-->
    <extra-info
      v-if="flag !== 'ecommerce'"
      :webchatData="webchatData"
      :chatInfo="chatInfo"
    ></extra-info>
    <!--浏览轨迹-->
    <track-browse
      :webchatData="webchatData"
      :chatInfo="chatInfo"
    ></track-browse>
    <!--历史访问记录-->
    <history-visit-list
      :webchatData="webchatData"
      :chatInfo="chatInfo"
    ></history-visit-list>
    <sessionForm      
      :webchatData="webchatData"
      :chatInfo="chatInfo">
    </sessionForm>
  </div>
</template>

<script>
import BaseInformation from './BaseInformation.vue'
import AccessInformation from './AccessInformation.vue'
import ConversationInfo from './ConversationInfo'
import trackBrowse from './trackBrowse'
import historyVisitList from './historyVisitList'
import extraInfo from './extraInfo'
import sessionForm from './sessionForm'
import * as types from '@/store/modules/webchat/mutation-types.js'
import {deepClone, updateOptions, initFinishName} from '@/utils/m7Utils'
export default {
  name: 'CustomerInformation',
  components: {
    BaseInformation,
    AccessInformation,
    ConversationInfo,
    trackBrowse,
    historyVisitList,
    extraInfo,
    sessionForm
  },
  data () {
    return {
      flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
      remark: '',
      // chaCue: '',
      finishArr: '',
      isHiddenmod: false,
      activeOptions: [],
      cardInfo: {
        endOptionsUl: [],
        EndSessionOptions: []
      },
      finishOptions: {}
    }
  },
  props: {
    customer: {
      type: Object,
      default: function () {
        return {}
      }
    },
    webchatData: Object,
    chatInfo: Object,
    currentBusinessObj: Object
  },
  watch: {
    'webchatData._id' () {
      this.remark = this.webchatData.remark || ''
      if (this.webchatData._id && this.tabType === 'webchat_todo') {
        this.getReadyFinishConfig()
      }
    },
    'webchatData.remark' () {
      this.remark = this.webchatData.remark || ''
    },
    'chatInfo' : {
      deep: true,
      handler () {
        if (this.chatInfo._id && this.tabType === 'webchat_all') {
          this.getReadyFinishConfig()
        }
      }
    },
    refreshWebchatSummary () {
      if (this.$refs.webchatCascader) {
        this.$refs.webchatCascader.dropDownVisible = false
      }
    }
  },
  methods: {
    editRemark () {
      if (this.remark !== this.webchatData.remark || (!this.webchatData.remark && this.remark !== '')) {
        let remark = {
          accessId: this.webchatData.accessId,
          sid: this.webchatData.sid,
          _id: this.webchatData._id,
          content: this.remark
        }
        this.$store.dispatch('updateWebchatSessionRemark', remark).then(() => {
        })
      }
    },
    editChatCue (obj) {
      var data = obj.currentTarget.value
      var sendData = {
          sessionId: this.webchatData._id,
          sid: this.webchatData.sid,
          cue: data,
          createTime: this.webchatData.createTime,
        }
      this.$store.dispatch('updateSessionCue', sendData).then(() => {
        
      })
    },
    changeFinishFun (data) {
      if (data) {
        let option = this.activeOptions[this.activeOptions.length - 1]
        if (option || option !== '') {
          let actName = option.split('__')[1]
          let finishKey = option.split('__')[0]
          let data = {
            _id: this.webchatData._id,
            sid: this.webchatData.sid,
            finishReason: actName,
            finishKey: finishKey,
          }
          if (this.tabType === 'webchat_all') {
            let data = {
              _id: this.chatInfo._id,
              finishReason: actName,
              finishKey: finishKey,
            }
            this.$store.dispatch('updateWebchatSessionFinishKey', data).then((res) => {
              if (res && res.success) {}
            })
          } else {
            this.$store.dispatch('updateReadyFinish', data).then((res) => {
              if (res && res.success) {
                this.$store.commit('CLOSESESSIONSTATUS', {_id: data._id, tabType: this.tabType, 
                list: { finishReason: actName, finishKey: finishKey, status: 'close'}}) 
              }
            })
          }
        }
      }
    },
    getReadyFinishConfig () {
      if (this.tabType === 'webchat_all') {
        if (this.chatInfo.finishKey) {
          this.activeOptions = [this.finishOptions[this.chatInfo.finishKey]]
        } else {
          this.activeOptions = []
        }
      } else {
        let data = {
          _id: this.webchatData._id
        }
        this.$store.dispatch('getReadyFinish', data).then(res => {
          if (res && res.success && res.data) {
            this.activeOptions = [this.finishOptions[res.data.finishKey]]
            this.$store.commit('CLOSESESSIONSTATUS', {_id: data._id, tabType: this.tabType,
            list: {status: 'close', finishReason: res.data.finishReason, finishKey: res.data.finishKey}})
          } else {
            this.activeOptions = []
          }
        })
      }
    }
  },
  computed: {
    tabType () {
      let arr = this.$route.path.split('/')
      return arr[3]
    },
    sessionId () {
      let arr = this.$route.path.split('/')
      return arr[4]
    },
    refreshWebchatSummary () {
      return this.$store.state.webchat.refreshWebchatSummary
    },
    chaCue: {
      get () {
        if (this.$store.state.webchat.current[this.tabType] && this.$store.state.webchat.current[this.tabType].currentSession && this.$store.state.webchat.current[this.tabType].currentSession[this.sessionId]) {
          if (this.tabType === 'webchat_todo') {
            return this.$store.state.webchat.current[this.tabType].currentSession[this.sessionId].cue || ''
          }
        } else if (this.tabType === 'webchat_all') {
          return this.$store.state.webchat.current[this.tabType].currentSession.cue || ''
        } else {
          return this.webchatData.cue || ''
        }
      },
      set (value) {
        var ValueData = value || ''
        if (this.tabType === 'webchat_todo') {
          return this.$store.commit(types.UPDATE_SESSION_CUE, {data: ValueData, _id: this.sessionId, type: 'current',todoType: 'webchat_todo'})
        } else if (this.tabType === 'webchat_all') {
          return this.$store.commit(types.UPDATE_SESSION_CUE, {data: ValueData, _id: this.sessionId, type: 'current',todoType: 'webchat_all'})
        }
      }
    },
    isCanShowFinishType () {
      if (this.tabType === 'webchat_all' && this.$store.state.session.user._id === this.chatInfo.user && this.chatInfo.status === 'finish') {
        return true
      } else {
        return false
      } 
    }
  },
  mounted () {
    this.remark = this.webchatData.remark || ''
    this.$store.dispatch('getCache', {type: 'channelDic'}).then((res) => {
      for (let i = 0; i < res.length; i++) {
        if (res[i].type === 'webchat') {
          this.finishArr = res[i].options || []
          break
        }
      }
      this.finishOptions = initFinishName(this.finishArr, {})
      if (this.finishArr.length === 0) {
        this.$message.error(this.$t('webchat.isNullByFinishKey'))
        return
      }
      updateOptions(this.finishArr, {Arr: this.cardInfo.EndSessionOptions})
      this.cardInfo.endOptionsUl = this.cardInfo.EndSessionOptions
      if (this.tabType === 'webchat_todo' || this.tabType === 'webchat_all' || this.tabType === 'webchat_laterProcess') {
        this.getReadyFinishConfig()
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.chat_info_remark
  padding-top 20px
  padding-left 20px
  padding-right 20px
  .container,.container_remark
    margin-bottom 10px
    padding-bottom 20px
    border-bottom solid 1px #d9d9d9
  .container_remark
    border-bottom none
  .container_finish
    margin-bottom 20px
  .chat_info_li_title
    padding-bottom 10px
    color #595959
  .chat_info_li_remarks,.chat_info_li_cue
    width 100%
    padding 5px 0 5px 6px
    border-radius 3px
    border-color #BFBFBF
    box-sizing border-box
    resize none
</style>
<style lang="stylus">
  .chat_info_remark .el-cascader
    width 100%  
</style>

